<template>
  <div>
    <div class="custom-progress-bar">
      <!-- 在这里添加你自定义的进度条组件或样式 -->
    </div>
    <video-player class="video-player-box" ref="videoPlayer" :playsinline="true" :options="playerOptions">
    </video-player>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
// import { getVideoDetail } from "@/api/video/video";

export default {
  name: "videoPlus1",
  components: {
    videoPlayer,
  },
  props: {
    url: {
      required: true,
      type: String
    },
    pic: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      // id: this.$route.params.id,
      // video: {},
      // downloadUrl: process.env.VUE_APP_DOWNLOAD_URL,
      // downloadVideoUrl: process.env.VUE_APP_DOWNVIDEO_URL,
      // lock: false,

      playerOptions: {
        playbackRates: [0.5, 0.75, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        setVolume: "0.7",
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/webm", // 类型
          src: this.url // url地址
        }],
        poster: this.pic, // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controls: true,
        controlBar: {
          // timeDivider: true, // 当前时间和持续时间的分隔符
          // durationDisplay: true, // 显示持续时间
          // remainingTimeDisplay: true, // 是否显示剩余时间功能
          // fullscreenToggle: true, // 是否显示全屏按钮
          // playToggle: true, // 播放暂停按钮
          volumeMenuButton: true, // 音量控制
          // currentTimeDisplay: true, // 当前播放时间
          // progressControl: true,  // 点播流时，播放进度条，seek控制
          // liveDisplay: true, // 直播流时，显示LIVE
          // playbackRateMenuButton: true // 播放速率，当前只有html5模式下才支持设置播放速率
        }
      }
    }
  },
  created() {
    // this.load()
  },

  methods: {
    // setVolume(value) {
    //   this.$refs.videoPlayer.setVolume(value);
    // },
    // load() {
    //   getVideoDetail(this.id).then(res => {
    //     this.video = res.data.data;
    //     console.log(res.data.data);
    //     this.playerOptions.sources[0].src = this.downloadVideoUrl + res.data.data.videoUrl;
    //     this.playerOptions.poster = this.downloadUrl + res.data.data.videoCover;
    //     document.title = res.data.data.videoTitle;
    //     this.lock = true;
    //   })
    // },
  },
}
</script>

<style >
/* .video-player-box {
  margin-top: 50px;
  margin-left: 50px;
  width: 800px;
} */

/*进度条*/
.video-player-box .vjs-progress-holder .vjs-play-progress {
  background-color: #409EFF;
}

.vjs-control-bar {
  height: 50px !important;
  width: 100%;
  background-color: #ccc;
}

/*进度条*/
.video-js .vjs-progress-control {
  height: 3px;
  width: 100% !important;
}

/*暂停键*/
.custom-progress-bar {
  /* 根据需要调整样式和位置 */
  background-color: #ccc;
}

.vjs-button>.vjs-icon-placeholder::before {
  font-size: 2.8em;
}
</style>
